*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

#app {
  width: 100%;
  height: 100vh;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  line-height: inherit;
  width: 100%;
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
}

::-webkit-file-upload-button {
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

.dark {
  color-scheme: dark;
}

// label {
//   font-weight: 700;
// }

*,
*::before,
*::after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.subcomponent {
  /* 隐藏滚动条 */
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  /* 添加滚动条 */
}

/* 自定义滚动条样式 */
.subcomponent::-webkit-scrollbar {
  width: 5px;
  /* 设置滚动条宽度 */
}

.subcomponent::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 设置滚动条轨道的背景颜色 */
}

.subcomponent::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 5px;
  /* 设置滚动条的颜色 */
}

.subcomponent::-webkit-scrollbar-thumb:hover {
  background-color: #c9c9c9;
  /* 设置鼠标悬停在滚动条上时的颜色 */
}

// 100%高度的
.scrollBar {
  /* 隐藏滚动条 */
  max-height: 100vh;
  overflow-y: auto;
  /* 添加滚动条 */
}

/* 自定义滚动条样式 */
.scrollBar::-webkit-scrollbar {
  width: 5px;
  /* 设置滚动条宽度 */
}

.scrollBar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 设置滚动条轨道的背景颜色 */
}

.scrollBar::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 5px;
  /* 设置滚动条的颜色 */
}

.scrollBar::-webkit-scrollbar-thumb:hover {
  background-color: #c9c9c9;
  /* 设置鼠标悬停在滚动条上时的颜色 */
}
// 100%高度的
.scrollBar_80 {
  /* 隐藏滚动条 */
  max-height: 80vh;
  overflow-y: auto;
  /* 添加滚动条 */
}

/* 自定义滚动条样式 */
.scrollBar_80::-webkit-scrollbar {
  width: 5px;
  /* 设置滚动条宽度 */
}

.scrollBar_80::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 设置滚动条轨道的背景颜色 */
}

.scrollBar_80::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 5px;
  /* 设置滚动条的颜色 */
}

.scrollBar_80::-webkit-scrollbar-thumb:hover {
  background-color: #c9c9c9;
  /* 设置鼠标悬停在滚动条上时的颜色 */
}

// 菜单被禁用的状态样式
.el-menu-item.is-disabled {
  opacity: 1 !important;
  // cursor: not-allowed;
  //   background: 0 0 !important
}
.el-sub-menu.is-disabled .el-menu-item,
.el-sub-menu.is-disabled .el-sub-menu__title {
  opacity: 1 !important;
}

// loading样式
#global_loading {
  position: absolute;
  top: 0;
  // padding: 25%  45%;
  height: 100%;
  width: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
}
.global_loading_box {
  position: absolute;
  top: 50%;
  left: 50%;
}
// css动画效果

// ====== 向上偏移 ====== //
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* 向上偏移 */
  animation: fadeInUp 0.8s forwards; /* 动画持续时间和前向动画 */
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); /* 返回到原位 */
  }
}

/* 为每个元素设置不同的延迟效果 */
.fade-in:nth-child(1) {
  animation-delay: 0.2s; /* h1 */
}

.fade-in:nth-child(2) {
  animation-delay: 0.4s; /* min_title */
}

.fade-in:nth-child(3) {
  animation-delay: 0.6s; /* details */
}

.fade-in:nth-child(4) {
  animation-delay: 0.8s; /* experience_btn_big */
}

/* 上下轻微跳动效果 */
.bounce {
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

/* 放大缩小效果（如按钮悬停时） */
.scale-on-hover {
  transition: transform 0.2s;
}

.scale-on-hover:hover {
  transform: scale(1.05);
}

/* 从上方淡入的动画 */
.fade-in-up {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 延迟出现效果 */
.delay-1s {
  animation-delay: 1s;
}

.delay-2s {
  animation-delay: 2s;
}

/* 背景渐显效果 */
.fade-in-bg {
  opacity: 0;
  animation: fadeInBg 1s forwards;
}

@keyframes fadeInBg {
  to {
    opacity: 1;
  }
}

/* 定义关键帧动画 */
@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// 上拉动画显示类名
.slide-dom-animation {
  /* 初始状态：将抽屉隐藏在屏幕下方，并设置透明度为 0 */
  transform: translateY(100%);
  opacity: 0;
  /* 显示时的动画效果 */
  animation: slideUp 0.4s ease forwards;
}
/* 定义 slideUp 动画 */
@keyframes slideUp {
  from {
    transform: translateY(100%); /* 从屏幕下方开始 */
    opacity: 0; /* 初始透明度 */
  }
  to {
    transform: translateY(0); /* 到达目标位置 */
    opacity: 1; /* 完全显示 */
  }
}

// 上拉动画显示类名
.slidedown-dom-animation {
  /* 初始状态：将抽屉隐藏在屏幕下方，并设置透明度为 0 */
  transform: translateY(-100%);
  opacity: 0;
  /* 显示时的动画效果 */
  animation: slidedown 0.4s ease forwards;
}
/* 定义 slidedown 动画 */
@keyframes slidedown {
  from {
    transform: translateY(-100%); /* 从屏幕下方开始 */
    opacity: 0; /* 初始透明度 */
  }
  to {
    transform: translateY(0); /* 到达目标位置 */
    opacity: 1; /* 完全显示 */
  }
}
/* 下拉隐藏动画类名 */
.slideup-dom-animation {
  /* 显示状态：抽屉在屏幕内完全显示，并设置透明度为 1 */
  transform: translateY(0);
  opacity: 1;
  /* 隐藏时的动画效果 */
  animation: slideup1 0.4s ease forwards;
}

/* 定义 slideup 动画 */
@keyframes slideup1 {
  from {
    transform: translateY(0); /* 从屏幕内开始 */
    opacity: 1; /* 初始透明度 */
  }
  to {
    transform: translateY(-100%); /* 隐藏到屏幕上方 */
    opacity: 0; /* 完全透明 */
  }
}

/* 重置动画：缩放并旋转 */
.reset-animation {
  animation: resetScaleRotate 0.6s ease-in-out;
}

/* 定义动画效果 */
@keyframes resetScaleRotate {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}
